import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class MyColumnarBar extends StatefulWidget {
  const MyColumnarBar(
      {super.key,
      this.width = 30.0,
      this.height = 250.0,
      this.yWidth = 20.0,
      this.yAxis,
      this.color,
      this.yAxisList,
      this.xAxisList});
  final double width, height, yWidth;
  final double? yAxis;
  final List<Color>? color;
  final List<double>? yAxisList;
  final List<MyMultipleXAxisStruct>? xAxisList;

  @override
  State<MyColumnarBar> createState() => _MyColumnarBarState();
}

class _MyColumnarBarState extends State<MyColumnarBar> {
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Container(
            margin: EdgeInsets.only(bottom: 16.w),
            constraints: BoxConstraints(minWidth: widget.width),
            height: widget.height + 10.w,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: widget.yAxisList!
                  .map(
                    (item) => Text(
                      item.toInt().toString(),
                      style: TextStyle(
                          color: const Color(0xff3A3B3D), fontSize: 12.sp),
                    ),
                  )
                  .toList(),
            )),
        Expanded(
            child: Stack(
          alignment: Alignment.bottomLeft,
          children: [
            //背景分割线
            Container(
              // color: Colors.blue,
              margin: EdgeInsets.only(left: 9.w, bottom: 20.w),
              child: Row(
                children: [
                  SizedBox(
                    width: 0.4.w,
                    height: widget.height,
                    child: Container(
                      color: const Color(0xff68A8CC).withAlpha(40),
                    ),
                  ),
                  Expanded(
                      child: SizedBox(
                          height: widget.height,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: List.generate(5, (index) {
                              return Container(
                                height: 0.4.w,
                                color: const Color(0xff68A8CC).withAlpha(40),
                              );
                            }).toList(),
                          )))
                ],
              ),
            ),
            Container(
              height: widget.height + 40.w,
              width: double.infinity,
              margin: EdgeInsets.only(left: 15.w),
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) {
                  return Container(
                    margin: EdgeInsets.only(right: 20.w),
                    child: MyColumnarClickBar(
                      height: widget.height,
                      yAxisList: widget.yAxisList!,
                      xAxisList: widget.xAxisList!,
                      color: widget.color,
                      index: index,
                      yWidth: widget.yWidth,
                    ),
                  );
                },
                itemCount: widget.xAxisList!.length,
              ),
            )
          ],
        )),
      ],
    );
  }
}

//x轴显示的view数据
class MyMultipleXAxisStruct {
  MyMultipleXAxisStruct({String? names, List<double>? nums, List<Color>? color})
      : names = names ?? '',
        color = color ?? [],
        nums = nums ?? [];
  final String names;
  final List<double> nums;
  final List<Color> color;
}

//x轴显示的view
class MyColumnarClickBar extends StatefulWidget {
  const MyColumnarClickBar(
      {required this.index,
      required this.yAxisList,
      required this.xAxisList,
      super.key,
      this.height,
      this.yWidth,
      this.color});
  final double? height, yWidth;
  final int index;
  final List<double> yAxisList;
  final List<MyMultipleXAxisStruct> xAxisList;
  final List<Color>? color;

  @override
  State<MyColumnarClickBar> createState() => _MyColumnarClickBarState();
}

class _MyColumnarClickBarState extends State<MyColumnarClickBar>
    with TickerProviderStateMixin {
  bool showsTitle = true; //默认为显示出来
  List<double> height = [];
  List<Color> color = [];
  late AnimationController _animationController;
  final List<Animation<double>> _tweenList = [];

  @override
  void dispose() {
    _animationController.stop();
    _animationController.dispose();
    super.dispose();
  }

  _initDate() {
    if (widget.color is List) {
      color = widget.color!;
    }

    bool additionColor = false;
    if (color.length < widget.xAxisList[widget.index].nums.length) {
      additionColor = true;
      color = [];
    }
    //动画控制
    _animationController =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
    for (var element in widget.xAxisList[widget.index].nums) {
      final double tempHeight = widget.yAxisList[0] == 0
          ? 0
          : widget.height! / widget.yAxisList[0] * element;
      height.add(tempHeight);
      _tweenList.add(
          Tween(begin: 0.0, end: tempHeight).animate(_animationController));
      if (additionColor) {
        color.add(color.length % 2 == 0
            ? const Color(0xff649FFF)
            : const Color(0xffFFA100));
      }
    }
    _animationController.forward();
  }

  @override
  void initState() {
    super.initState();

    _initDate();
  }

  @override
  void didUpdateWidget(covariant MyColumnarClickBar oldWidget) {
    super.didUpdateWidget(oldWidget);
    // _initDate();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          if (mounted) {
            showsTitle = !showsTitle;
            if (mounted) {
              setState(() {});
            }
            setState(() {});
          }
        },
        child: Container(
            color: Colors.transparent,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: widget.xAxisList[widget.index].nums
                      .asMap()
                      .keys
                      .map<Widget>((i) {
                    return Column(
                      children: [
                        showsTitle
                            ? Center(
                                child: Text(
                                  widget.xAxisList[widget.index].nums[i]
                                      .toString()
                                      .split('.')[0],
                                  style: TextStyle(
                                      color: const Color(0xff649FFF),
                                      fontSize: 10.w,
                                      fontWeight: FontWeight.w500),
                                ),
                              )
                            : Container(),
                        AnimatedBuilder(
                            animation: _animationController,
                            builder: (context, child) {
                              return Container(
                                margin: EdgeInsets.symmetric(horizontal: 3.w),
                                decoration: BoxDecoration(
                                    color: widget.xAxisList[widget.index].color
                                                .length >
                                            i
                                        ? widget
                                            .xAxisList[widget.index].color[i]
                                        : color[i],
                                    borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(2.5.w),
                                        topRight: Radius.circular(2.5.w))),
                                height: _tweenList[i].value,
                                width: 12.w,
                              );
                            }),
                      ],
                    );
                  }).toList(),
                ),
                SizedBox(
                  height: 4.w,
                ),
                Container(
                  constraints: BoxConstraints(
                    minWidth: 50.w,
                  ),
                  alignment: Alignment.center,
                  child: Text(widget.xAxisList[widget.index].names.toString(),
                      style: TextStyle(fontSize: 12.w),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis),
                )
              ],
            )));
  }
}

class ColumnarBar {
  // 显示柱状图
  static Widget columnarBar(
      {required double yAxis,
      required List<MyMultipleXAxisStruct> xAxisList,
      double height = 250,
      double width = 30,
      List<Color>? color,
      double yWidth = 20}) {
    final List<double> yAxisList = [];
    final int xNum = (yAxis / 4).ceil().toInt();
    for (var i = 4; i > -1; i--) {
      yAxisList.add((xNum * i).toDouble());
    }
    return MyColumnarBar(
      width: width,
      height: height,
      yAxis: yAxis,
      xAxisList: xAxisList,
      color: color,
      yWidth: yWidth,
      yAxisList: yAxisList,
    );
  }
}
